<template>
  <div class="student-dashboard">
    <div class="header">
      <h1>学生学习台</h1>
      <p>查看学习任务和提交作业</p>
    </div>
    
    <div class="content">
      <!-- 功能卡片区域 -->
      <div class="function-cards">
        <div class="card-item" @click="goToLearningTasks">
          <div class="card-icon">
            <el-icon size="32">
              <Document />
            </el-icon>
          </div>
          <div class="card-content">
            <h3>学习任务</h3>
            <p>查看和完成学习任务</p>
          </div>
        </div>
        
        <div class="card-item" @click="goToHomeworkSubmission">
          <div class="card-icon">
            <el-icon size="32">
              <Upload />
            </el-icon>
          </div>
          <div class="card-content">
            <h3>作业提交</h3>
            <p>提交作业和查看批改</p>
          </div>
        </div>
        
        <div class="card-item" @click="goToGradeView">
          <div class="card-icon">
            <el-icon size="32">
              <View />
            </el-icon>
          </div>
          <div class="card-content">
            <h3>成绩查看</h3>
            <p>查看作业成绩和评语</p>
          </div>
        </div>
        
        <div class="card-item" @click="goToWrongQuestions">
          <div class="card-icon">
            <el-icon size="32">
              <Warning />
            </el-icon>
          </div>
          <div class="card-content">
            <h3>错题复习</h3>
            <p>错题集和复习资料</p>
          </div>
        </div>
      </div>
      
      <!-- 统计信息 -->
      <div class="statistics">
        <div class="stat-card">
          <div class="stat-number">{{ stats.totalTasks }}</div>
          <div class="stat-label">总任务数</div>
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ stats.pendingTasks }}</div>
          <div class="stat-label">待完成</div>
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ stats.completedTasks }}</div>
          <div class="stat-label">已完成</div>
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ stats.averageScore }}</div>
          <div class="stat-label">平均分</div>
        </div>
      </div>
      
      <!-- 最近任务列表 -->
      <div class="recent-tasks">
        <h3>最近任务</h3>
        <div class="task-list">
          <div v-for="task in recentTasks" :key="task.id" class="task-item" @click="viewTask(task)">
            <div class="task-info">
              <h4>{{ task.title }}</h4>
              <p>{{ task.description }}</p>
              <div class="task-meta">
                <span class="subject">{{ task.subject }}</span>
                <span class="status" :class="task.status">{{ getStatusText(task.status) }}</span>
                <span v-if="task.score" class="score">得分: {{ task.score }}</span>
              </div>
            </div>
            <div class="task-actions">
              <el-button size="small" type="primary" @click.stop="submitTask(task)" v-if="task.status === 'pending'">
                提交
              </el-button>
              <el-button size="small" @click.stop="viewTask(task)">
                查看
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Document, Upload, View, Warning } from '@element-plus/icons-vue'

const router = useRouter()

// 统计数据
const stats = ref({
  totalTasks: 8,
  pendingTasks: 2,
  completedTasks: 6,
  averageScore: 85
})

// 最近任务
const recentTasks = ref([
  {
    id: 1,
    title: '数学期中考试',
    description: '高中数学期中考试试卷',
    subject: '数学',
    status: 'completed',
    score: 92,
    createdAt: '2024-01-15'
  },
  {
    id: 2,
    title: '语文作文练习',
    description: '高中语文作文写作练习',
    subject: '语文',
    status: 'pending',
    createdAt: '2024-01-14'
  },
  {
    id: 3,
    title: '英语听力训练',
    description: '高中英语听力理解训练',
    subject: '英语',
    status: 'graded',
    score: 88,
    createdAt: '2024-01-13'
  }
])

// 方法
const goToLearningTasks = () => {
  router.push('/homework/student/tasks')
}

const goToHomeworkSubmission = () => {
  router.push('/homework/student/submit')
}

const goToGradeView = () => {
  router.push('/homework/student/grades')
}

const goToWrongQuestions = () => {
  router.push('/homework/student/wrong-questions')
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: '待完成',
    completed: '已完成',
    graded: '已批改'
  }
  return statusMap[status] || status
}

const viewTask = (task: any) => {
  console.log('查看任务:', task)
}

const submitTask = (task: any) => {
  console.log('提交任务:', task)
}

onMounted(() => {
  console.log('学生学习台已加载')
})
</script>

<style scoped lang="scss">
.student-dashboard {
  padding: 24px;
  
  .header {
    margin-bottom: 32px;
    
    h1 {
      font-size: 32px;
      color: #303133;
      margin-bottom: 8px;
    }
    
    p {
      font-size: 16px;
      color: #606266;
    }
  }
  
  .content {
    .function-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 24px;
      margin-bottom: 32px;
      
      .card-item {
        background: white;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }
        
        .card-icon {
          margin-bottom: 16px;
          
          .el-icon {
            color: #67C23A;
          }
        }
        
        .card-content {
          h3 {
            font-size: 18px;
            color: #303133;
            margin-bottom: 8px;
          }
          
          p {
            font-size: 14px;
            color: #606266;
          }
        }
      }
    }
    
    .statistics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-bottom: 32px;
      
      .stat-card {
        background: white;
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        
        .stat-number {
          font-size: 32px;
          font-weight: bold;
          color: #67C23A;
          margin-bottom: 8px;
        }
        
        .stat-label {
          font-size: 14px;
          color: #606266;
        }
      }
    }
    
    .recent-tasks {
      background: white;
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      
      h3 {
        font-size: 20px;
        color: #303133;
        margin-bottom: 16px;
      }
      
      .task-list {
        .task-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px 0;
          border-bottom: 1px solid #f0f0f0;
          cursor: pointer;
          
          &:last-child {
            border-bottom: none;
          }
          
          &:hover {
            background: #f5f7fa;
            margin: 0 -24px;
            padding: 16px 24px;
          }
          
          .task-info {
            flex: 1;
            
            h4 {
              font-size: 16px;
              color: #303133;
              margin-bottom: 4px;
            }
            
            p {
              font-size: 14px;
              color: #606266;
              margin-bottom: 8px;
            }
            
            .task-meta {
              display: flex;
              gap: 12px;
              align-items: center;
              
              .subject {
                background: #e1f3ff;
                color: #409EFF;
                padding: 2px 8px;
                border-radius: 4px;
                font-size: 12px;
              }
              
              .status {
                padding: 2px 8px;
                border-radius: 4px;
                font-size: 12px;
                
                &.pending {
                  background: #fef0e6;
                  color: #e6a23c;
                }
                
                &.completed {
                  background: #f0f9ff;
                  color: #67c23a;
                }
                
                &.graded {
                  background: #e1f3ff;
                  color: #409EFF;
                }
              }
              
              .score {
                font-size: 12px;
                color: #67C23A;
                font-weight: bold;
              }
            }
          }
          
          .task-actions {
            display: flex;
            gap: 8px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .student-dashboard {
    padding: 16px;
    
    .content .function-cards {
      grid-template-columns: 1fr;
    }
    
    .content .statistics {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
</style> 